<template>
  <div>
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <div class="grid-content bg-purple search">
            <el-form ref="query" :model="query" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="状态">
                <el-select v-model="query.keywords" placeholder="请选择状态">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="待使用" value="1"></el-option>
                  <el-option label="已使用" value="2"></el-option>
                  <el-option label="已过期" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" style="text-align:right">
            <el-button type="primary" @click="queryAsk">查询</el-button>
            <el-button @click="queryReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="tableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="title" label="名称"></el-table-column>
        <el-table-column align="center" prop="title" label="优惠券状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==1">待使用</div>
            <div v-if="scope.row.status==2">已使用</div>
            <div v-if="scope.row.status==3">已过期</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="box_name" label="可用盲盒">
          <template slot-scope="scope">
            <div v-if="scope.row.box_name.length==0">-</div>
            <div v-else>{{scope.row.box_name.join(',')}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">满减</div>
            <div v-if="scope.row.type==2">立减</div>
            <div v-if="scope.row.type==3">折扣</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="scope">
            <div v-if="scope.row.type==3">-</div>
            <div v-if="scope.row.type!=3">{{scope.row.money}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="折扣">
          <template slot-scope="scope">
            <div v-if="scope.row.type==3">{{scope.row.discount}}</div>
            <div v-if="scope.row.type!=3">-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="满多少可用">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">{{scope.row.m_money}}</div>
            <div v-if="scope.row.type!=1">-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="add_time" label="获得时间"></el-table-column>
        <el-table-column align="center" prop="use_time" label="使用时间"></el-table-column>
        <el-table-column align="center" prop="pass_time" label="过期时间"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              style="margin-left:10px"
              @click="handleSend(scope.row)"
              type="text"
              size="small"
            >发放</el-button>
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="这是一段内容确定删除吗？"
              v-if="scope.row.status==1"
              @onConfirm="handleDel(scope.row)"
            >
              <el-button
                style="margin-left:10px;color:red"
                slot="reference"
                type="text"
                size="small"
                v-if="scope.row.status!=2"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 发放 -->
    <el-dialog
      title="发放优惠券"
      :before-close="handleClose"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form ref="sendForm" :model="sendForm" :rules="sendRules" label-width="100px">
        <el-form-item label="优惠券名称">
          <div>{{sendForm.name}}</div>
        </el-form-item>
        <el-form-item label="发放数量" prop="num">
          <el-input v-model="sendForm.num"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="sendSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sendCoupon } from "@/api/coupon";
import { userCoupon, deluserCoupon } from "@/api/consumer";
import { parseTime } from "@/utils/index";
export default {
  props: {
    user_id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //input
      query: {
        keywords: "0"
      },
      tableData: [],
      centerDialogVisible: false,
      sendForm: {
        id: "",
        user_id: "",
        num: "",
        name: ""
      },
      sendRules: {
        num: [{ required: true, message: "请输输入数量", trigger: "blur" }]
      }
    };
  },
  mounted() {
    // this.getUserCoupon();
  },
  watch: {
    user_id(newVal, oldVal) {
      this.getUserCoupon();
    }
  },
  methods: {
    // 获取优惠券列表
    async getUserCoupon() {
      const res = await userCoupon({
        user_id: this.user_id,
        page: this.currentPage,
        limit: this.pageSize,
        status: this.query.keywords
      });
      console.log(res);
      this.tableData = res.data;
      this.tableData.forEach(item => {
        if (item.add_time == 0) {
          item.add_time = "-";
        } else {
          item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
        if (item.use_time == 0) {
          item.use_time = "-";
        } else {
          item.use_time = parseTime(item.use_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
        if (item.pass_time == 0) {
          item.pass_time = "-";
        } else {
          item.pass_time = parseTime(item.pass_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
      });
      this.total = res.count;
    },
    queryAsk() {
      this.currentPage = 1;
      this.getUserCoupon();
    },
    //重置
    queryReset() {
      this.resetForm("query");
      this.total = 0;
      this.currentPage = 1;
      this.pageSize = 10;
      this.query.keywords = "";
      this.getUserCoupon();
    },

    //分页改变
    currentChange(current) {
      this.currentPage = current;
      this.getUserCoupon();
    },
    // 表格操作
    handleSend(row) {
      this.centerDialogVisible = true;
      console.log(row);
      this.sendForm.id = row.coupon_id;
      this.sendForm.user_id = this.user_id;
      this.sendForm.name = row.title;
    },
    handleClose(done) {
      const form = {
        id: "",
        user_id: "",
        num: "",
        name: ""
      };
      this.sendForm = form;
      this.centerDialogVisible = false;
      // done();
    },
    async sendSubmit() {
      console.log(this.sendForm);
      this.$refs["sendForm"].validate(async valid => {
        if (valid) {
          const res = await sendCoupon({ ...this.sendForm });
          if (res.st === 1) {
            this.resetForm("sendForm");
            const form = {
              id: "",
              user_id: "",
              num: "",
              name: ""
            };
            this.sendForm = form;
            this.getUserCoupon();
            this.$message({
              message: "发放成功",
              type: "success"
            });
            this.centerDialogVisible = false;
          } else {
            console.log(res);
            this.$message.error("发放失败");
          }
        }
      });
    },
    async handleDel(row) {
      console.log("后端接口");
      try {
        const res = await deluserCoupon({ id: row.id, user_id: this.user_id });
        console.log(res);
        this.getUserCoupon();
        this.$message({
          message: "删除成功",
          type: "success"
        });
      } catch (error) {
        this.$message.error("删除失败");
        console.log(error);
      }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang='scss' scoped>
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-input {
  width: 292px;
  display: block;
  position: static !important;
}
::v-deep .el-input--medium .el-input__inner {
  width: 292px;
}

::v-deep .el-form-item__label {
  padding: 0 30px 0 0;
}
</style>